<template>
  <div class="form">
    <pro-table
    :tableSource="tableData"
    :columns="columns"
    :draggle="true"
    :border="true"
    :merge="['name','disabled']"
    @onload="getList"
    @changeSortIndex="changeSort"
    @add="add"
    :initParam="{}"
    >

    <template #title="item">
      <template v-if="item.dataIndex === '__sort__'">
        #
      </template>
      <template v-else>
        {{ t(item.dataIndex) }}
      </template>
    </template>

    <template #bodyCell="{record,column}">
      <template v-if="column.dataIndex === 'dept_id'">
        {{  getValue(deptList,record[column.dataIndex]) }}
      </template>
      <template v-else-if="column.dataIndex === 'operation'">
        <ProButton type="link" :options="['view','edit','delete']" :cancel="cancel" :finished="finished"></ProButton>
      </template>
      <template v-else>
        {{ record[column.dataIndex] }}
      </template>
    </template>
    </pro-table>
  </div>
</template>
<script lang="ts" setup>
import {onMounted, ref,getCurrentInstance} from "vue"
import ProTable from "@/components/ProTable"
import type { TableProps } from "@/components/ProTable"
import fetchApi from "@/api/system/user"
import { useI18n } from 'vue-i18n'
const { proxy }:any = getCurrentInstance();
import {move} from "@/utils/utils"
import { buttonType } from "@/components/ProButton/interface";


const { t } = useI18n({inheritLocale: true,useScope: 'local'})

const tableData = ref<TableProps['tableSource']>({
  current:1,
  pageSize:20,
  total:0,
  list:[]
})

const disabledList = [
  {label:"禁用",
  value:"0",
  locale:{
    ch:"禁用",
    en:"disabled"
  }
},
{label:"启用",
  value:"1",
  locale:{
    ch:"启用",
    en:"enable"
  }
}]

const deptList = ref<APISYSTEMDEPT.SysDeptList[]>()

const columns:TableProps['columns'] = [
  {
    width:100,
    search:true,
    dataIndex:"name",
    title: "姓名",
  },
  {
    width:100,
    searchType:"treeSelect",
    dataIndex:"dept_id",
    title: "部门",

  },
  {
		dataIndex: "disabled",
		title: "禁用",
		search: true,
    searchType: "select",
    align:"center",
    enum: disabledList,
    dic: disabledList
	},
  {
    dataIndex:"email",
    title: "邮箱",
  },
  {
    search:true,
    searchType:"date",
    dataIndex:"create_time",
    title: "创建时间",
  },
  {
    maxWidth:300,
    minWidth:100,
    resizable:true,
    width:120,
    dataIndex:"update_time",
    title: "更新时间",
  },
  {
    maxWidth:300,
    minWidth:200,
    resizable:true,
    width:300,
    dataIndex:"remark",
    title: "备注",
  },
  {
    width:250,
    dataIndex:"operation",
    title:"操作"
  }
]

const getList = async (params:any)=>{
  const {code,data} = await fetchApi.sysUserList(params)
  if(code === 200){
    tableData.value = data
  }
}

const getDeptList = async ()=>{
  const {code,data} = await fetchApi.sysUserList({page:1,limit:20})
  if(code === 200){
    deptList.value = data
  }
}

const getValue = (list:any,value:any)=>{
   const item =  proxy.$chain(list).find(['id',value]).value()
   return item && item.name ? item.name : '-'
}


const changeSort = (params:any)=>{
  const [fir,sec] = params
  if(tableData.value){
    const value = move(fir,sec,tableData.value.list)
    tableData.value.list = value
  }
}

const add = ()=>{
  alert('新增按钮弹窗')
}

const cancel = ()=>{
  alert("取消")
}

const finished = (status:buttonType)=>{
  return new Promise((resolve)=>{
    setTimeout(() => {
      resolve(status)
    }, 2000);
  })
}


onMounted(()=>{
  getDeptList()
})

</script>

<i18n>
{
  "en": {
    "name": "Name",
    "dept_id": "DeptName",
    "disabled": "Disabled",
    "email": "Email",
    "create_time": "Create Time",
    "update_time": "Update Time",
    "remark": "Remark",
    "operation":"Operation",
    "view":"View",
    "edit":"Edit",
    "delete":"Delete",
  },
  "ch": {
    "name": "姓名",
    "dept_id": "部门",
    "disabled": "禁用",
    "email": "邮箱",
    "create_time": "创建时间",
    "update_time": "更新时间",
    "remark": "备注",
    "operation":"操作",
    "view":"查看",
    "edit":"编辑",
    "delete":"删除"
  }
}
</i18n>


<style lang="less" scoped>
:deep(.ant-picker){
  width: 100%;
}
</style>
